<template>
  <div class="person">
    <div class="top">
      <div class="left">
        <span>{{ user.isInsure == 1 ? "医保" : "自费" }}</span>
        <p>{{ user.name }}</p>
      </div>
      <div class="right">
        <el-button type="primary" :icon="Edit" circle @click="changeScene" />
        <el-popconfirm :title="`你确定删除${user.name}吗?`" @confirm="DeleteUser">
          <template #reference>
            <el-button
              type="danger"
              :icon="Delete"
              circle
              v-if="isShow"
             
            />
          </template>
        </el-popconfirm>
      </div>
    </div>
    <div class="bottom">
      <p>证件类型 : {{ user.param.certificatesTypeString }}</p>
      <p>证件号码 : {{ user.certificatesNo }}</p>
      <p>用户性别 : {{ user.sex == 0 ? "女" : "男" }}</p>
      <p>出生日期 : {{ user.birthdate }}</p>
      <p>手机号码 : {{ user.phone }}</p>
      <p>婚姻状况 : {{ user.isMarry == 0 ? "未婚" : "已婚" }}</p>
      <p>当前住址 : {{ user.param.cityString }}</p>
      <p>详细地址 : {{ user.param.fullAddress }}</p>
      <Transition name="comform">
        <div class="comform" v-show="index == currentIndex">已选择</div>
      </Transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Edit, Delete } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
//引入接口
import { reqRemoveUser } from "@/api/User";
import { ElMessage } from "element-plus";
let $route = useRoute();
let $router = useRouter();
let props = defineProps(["user", "index", "currentIndex", "isShow"]);
let $emit = defineEmits(["changeScene", "DeleteUser"]);
//调用自定义事件
const changeScene = () => {
  if ($route.path == "/user/manage") {
    $emit("changeScene", 1, props.user);
  } else {
    $router.push({
      path: "/user/manage",
      query: {
        type: "edit",
        id: props.user.id,
      },
    });
  }
};
//删除用户的回调
const DeleteUser = async () => {
  try {
    let result = await reqRemoveUser(props.user.id);
    if (result.code == 200) {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      //调用自定义事件
      $emit("DeleteUser");
    }
  } catch (error) {
    ElMessage({
      type: "error",
      message: "删除失败",
    });
  }
};
</script>

<style scoped lang="scss">
.person {
  //设置边框阴影
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  .top {
    display: flex;
    border-radius: 20px;
    justify-content: space-between;
    background-color: #e5e5e5;
    align-items: center;
    padding: 10px;
    .left {
      display: flex;
      align-items: center;
      margin-left: 15px;
      span {
        background-color: white;
        border-radius: 15px;
        padding: 8px;
        font-size: 14px;
        margin-right: 5px;
      }
    }
    .right {
      margin-right: 15px;
    }
  }
  .bottom {
    position: relative;
    padding: 20px;
    p {
      line-height: 30px;
    }
    .comform {
      position: absolute;
      left: 20%;
      top: 20%;
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
      border-radius: 50%;
      border: 2px dashed red;
      color: red;
      opacity: 0.6;
      font-weight: 900;
      transform: rotate(35deg);
    }
    .comform-enter-from {
      transform: scale(1);
    }
    .comform-enter-active {
      transition: all 0.3s;
    }
    .comform-enter-to {
      transform: scale(1.2);
    }
  }
}
</style>
